<!-- 选择员工(美妆顾问)弹窗公用组件 -->
<template>
  <div class="select-staff">
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      :before-close="handleClose"
    >
    <div class="content">
      <div class="search p-flex p-ai-c m-b-15">
        <div class="inp p-flex p-ai-c m-r-15">
          <span class="m-r-10">校区部门</span>
          <div class="m-r-10">
            <el-select v-model="searchParams.departmentId" size="small" clearable filterable placeholder="请选择">
              <el-option
                  v-for="item in schollOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
          </div>
          <span class="m-r-10">姓名</span>
          <div>
            <el-input v-model="searchParams.name" size="small" clearable  placeholder="输入"></el-input>
          </div>
        </div>
        <div class="btn">
          <el-button type="primary" size="small" @click="search">搜索</el-button>
        </div>
      </div>
      <div class="list">
        <el-table :data="tableData" 
        style="width: 100%" border 
        highlight-current-row 
        ref="singleTableRef"
        @current-change="handleCurrentChange"
        >
          <el-table-column prop="schoolName" label="校区部门" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="mobile" label="电话" align="center"></el-table-column>
          <el-table-column prop="position" label="职位" align="center"></el-table-column>
        </el-table>
      </div>
      <div class="pt-10">
        <el-pagination small background 
        layout="prev, pager, next, jumper" 
        :total="total" 
        :page-size="searchParams.size" 
        v-model:currentPage="searchParams.current" 
        @current-change="curentChange">
        </el-pagination>
      </div>
      <div class="pt-15 p-flex p-jc-c">
        <el-button type="primary" size="small" @click="confirm">确认</el-button>
        <el-button type="danger" size="small" @click="dialogVisible = false">取消</el-button>
      </div>
    </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElTable, ElMessage } from 'element-plus'
import { ref, getCurrentInstance, defineExpose, defineEmits, defineProps } from "vue";
const { proxy } = getCurrentInstance()
const props = defineProps({
  staffType: {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(['confirm'])

const dialogVisible = ref(false)
const dialogTitle = ref("选择员工")
const tableData = ref([])
const searchParams = ref({
  name: "",  //员工姓名
  departmentId: null, //部门ID
  current: 1,
  size: 10,
})
const total = ref(10)
const schollOption = ref([])

const currentRow = ref()
// 单选
const handleCurrentChange = (val) => {
  currentRow.value = val
}

// 搜索
const search = () => {
  searchParams.value.current = 1
  getUserList()
}

// 获取部门列表
const getDeptList = async() => {
  const { code, data } = await proxy.$API.dept.list.get();
  if (code == 200) {
    schollOption.value = data
  }
}

// 获取员工列表
const getUserList = async() => {
  searchParams.value.type = props.staffType
  const { code, data } = await proxy.$API.public.findEnterprise.get(searchParams.value);
  if (code == 200) {
    tableData.value = data.records
    total.value =  data.total
  }
}

// 分页
const curentChange = (page) => {
  console.log(page);
  getUserList()
}
const singleTableRef = ref(null)
// 弹窗关闭
const handleClose = () => {
  // singleTableRef.value.setCurrentRow(currentRow.value)
  dialogVisible.value = false
}

// 调用打开弹窗
const openDialog = (title) => {
  getDeptList()
  getUserList()
  if(title) {
    dialogTitle.value= title
  }
  dialogVisible.value = true
}

const confirm = () => {
  const data = currentRow.value
  if (currentRow.value) {
    emit('confirm', data)
    dialogVisible.value = false
  }else{
    ElMessage({
			message: "请选择美妆顾问",
			type: "warning",
		});
  }
}
defineExpose({openDialog})
</script>